<template>
	<page-meta page-style="height: 100%;">

	</page-meta>
	<view class="about-application">
		<view class="app-info">
			<text class="app-name">{{ detail?.appName || appName }}</text>
			<image v-if="detail?.icon" class="app-logo" :src="detail?.icon" mode="aspectFill"></image>
			<image v-else class="app-logo" src="/static/logo.png" mode="aspectFill"></image>
			<text
				class="app-version">{{i18Replace($t('about.application.version'), { version: `V${appVersion}(${appVersionCode})` })}}</text>
			<!-- <text class="app-desc">{{ $t('about.application.desc') }}<br />{{ $t('about.application.tips') }}</text> -->
			<text class="app-desc">{{ detail?.content }}</text>
		</view>
		<view class="footer">
			<text>{{ i18Replace($t('about.application.copyright'), { name: detail?.companyName }) }}</text>
			<safe-area-insets-bottom></safe-area-insets-bottom>
		</view>
	</view>
</template>

<script setup>
	const {
		appName,
		appVersion,
		appVersionCode
	} = uni.getAppBaseInfo();
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		selectAppInfo
	} from "../../apis/components/system";

	import {
		i18Replace
	} from "@/utils/functions.js";
	import {
		ref
	} from "vue";

	const detail = ref(null);

	onShow(async () => {
		detail.value = await selectAppInfo(appVersion)
	})
</script>

<style lang="scss" scoped>
	.about-application {
		height: 100%;
		@include flex(column);
		justify-content: space-between;
		align-items: center;

		.app-info {
			@include flex(column);
			align-items: center;
			padding: 60rpx 32rpx 24rpx;

			.app-name {
				// font-family: Alibaba PuHuiTi 2.0;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 1;
				text-align: center;
				letter-spacing: 0.0145em;
				color: #FFFFFF;
			}

			.app-logo {
				margin-top: 40rpx;
				display: block;
				width: 180rpx;
				height: 180rpx;
				border-radius: 36rpx;
			}

			.app-version {
				margin-top: 40rpx;
				// font-family: PingFangSC;
				font-size: 28rpx;
				line-height: 1;

				color: #DDDDDD;
			}

			.app-desc {
				margin-top: 62rpx;
				// font-family: Alibaba PuHuiTi 3.0;
				font-size: 28rpx;
				line-height: 1.5;
				// text-align: center;
				white-space: pre-line;

				color: #DDDDDD;
			}
		}

		.footer {
			@include flex(column);
			align-items: center;
			justify-content: center;
			padding-bottom: 40rpx;

			text {
				// font-family: Alibaba PuHuiTi 3.0;
				font-size: 24rpx;
				line-height: 1.6;
				color: #808080;
				text-align: center;

				&:not(:first-child) {
					margin-top: 25rpx;
				}
			}
		}
	}
</style>